<template>
    <view class="main">
        <view class="top">
            <view class="title">请选择购买方式</view>
            <view class="close" @click="close">X</view>
        </view>
        <view class="guige">购买规格</view>
        <view class="shangpin">
            <scroll-view style="height: 690rpx;" scroll-y="true">
                <view :class="index === spId ? 'selected' : ''" @click="xuangou(index,item)" class="goods"
                    v-for="(item, index) in items">
                    <view :class="index === spId ? 'goodsnameed' : ''" class="goodsname">{{ item.explain}}</view>
                    <view class="price">￥{{ item.price }}</view>
                </view>
            </scroll-view>
        </view>
        <view class="confrim" @click="confrim()">确定</view>
    </view>
</template>
<script>
import { getGoodsDetails } from "@/api/home.js";
export default {
    props: {
        productId: {
            type: Number,
            required: true
        }
    },
    data() {
        return {
            spId: 0,
            items: [],
            skus:{}
        }
    },
    methods: {
        getDetails() {
            getGoodsDetails({
                id: this.productId,
            }).then((res) => {
                if(res.code===1){
                    this.items=res.data.skus
                    this.skus=res.data.skus[0]
                }
            });
        },
        xuangou(index,item) {
            this.spId = index
            this.skus=item
        },
        confrim(){
            this.$emit("skusData",this.skus)
        },  
        close() {
            this.$emit('close');
        }
    },
    mounted() {
        this.getDetails();
    },
}
</script>
<style scoped lang="scss">
.main {
    padding: 20rpx 36rpx;

    .top {
        display: flex;
        align-items: baseline;
        justify-content: space-between;

        .title {
            font-size: 30rpx;
            color: black;
            font-weight: bold;
        }
    }

    .guige {
        margin-top: 20rpx;
        font-size: 28rpx;
        margin-bottom: 30rpx;
    }

    .shangpin {
        .selected {
            background-color: #fef4ea !important;
            border: 1rpx solid #ff8104 !important
        }

        .goods {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 28rpx 28rpx;
            border-radius: 10rpx;
            margin-bottom: 40rpx;
            background: #fafafa;
            color: #ff8104;

            img {
                width: 80rpx;
                height: 80rpx;

            }

            .goodsname {
                font-size: 28rpx;
                color: black;
            }

            .goodsnameed {
                color: #ff8104 !important;
            }

            .price {
                font-weight: bold
            }
        }
    }

    .confrim {
        width: 100%;
        height: 96rpx;
        text-align: center;
        background: #ff8104;
        border-radius: 8rpx;
        line-height: 96rpx;
        color: #fff;
        margin: auto;
        margin-top: 20rpx;
    }
}
</style>
